<template>
  <div class="st_info">
    <Header />
    <div class="main">
      <h1>修改个人信息</h1>
      <div class="trans">
        <div class="form">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名:" prop="st_name">
              <el-input
                type="text"
                v-model="ruleForm.st_name"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="学生学号:" prop="st_id">
              <el-input v-model="ruleForm.st_id" type="text" disabled />
            </el-form-item>
            <el-form-item label="手机号:" prop="st_phone">
              <el-input v-model="ruleForm.st_phone" type="text" disabled />
            </el-form-item>
            <el-form-item class="white" label="性别:" prop="st_sex">
              <el-radio v-model="ruleForm.st_sex" label="0">女</el-radio>
              <el-radio v-model="ruleForm.st_sex" label="1">男</el-radio>
            </el-form-item>
            <el-form-item class="white" label="年级:" prop="st_year">
              <el-cascader
                v-model="ruleForm.st_year"
                :options="grade_options"
              />
            </el-form-item>
            <el-form-item label="密码:" prop="st_password">
              <el-input v-model="ruleForm.st_password" type="text" clearable />
            </el-form-item>
            <div class="info_button">
              <el-button type="success" @click="submitForm">保存修改</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../components/logo.vue";
export default {
  name: "test",
  components: {
    Header,
  },
  data() {
    return {
      value: [],
      grade_options: [
        {
          value: "一年级",
          label: "一年级",
        },
        {
          value: "二年级",
          label: "二年级",
        },
        {
          value: "三年级",
          label: "三年级",
        },
        {
          value: "四年级",
          label: "四年级",
        },
        {
          value: "五年级",
          label: "五年级",
        },
        {
          value: "六年级",
          label: "六年级",
        },
        {
          value: "初一",
          label: "初一",
        },
        {
          value: "初二",
          label: "初二",
        },
        {
          value: "初三",
          label: "初三",
        },
      ],
      ruleForm: {
        st_name: "",
        st_sex: "",
        st_phone: "",
        st_password: "",
        cl_id: "",
      },
      student: [{}],
      rules: {
        st_name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    loadStudentMsg() {
      this.axios
        .get("http://10.197.43.62:8088/student/studentxx?st_id=" + this.st_id)
        .then((res) => {
          console.log(res.data);
          this.ruleForm = res.data[0];
        });
    },

    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let st_name = this.ruleForm.st_name;
          let st_password = this.ruleForm.st_password;
          let st_sex = this.ruleForm.st_sex;
          let st_year = this.ruleForm.st_year;

          this.axios
            .get(
              "http://10.197.43.62:8088/student/updata?st_name=" +
                st_name +
                "&st_password=" +
                st_password +
                "&st_sex=" +
                st_sex +
                "&st_year=" +
                st_year +
                "&st_id=" +
                this.st_id
            )
            .then((res) => {
              console.log(st_name);
              console.log(res.data);
              if (res.data.data === 1) {
                this.$message({
                  message: "恭喜你，修改成功",
                  type: "success",
                });
                this.$router.push("/st_course");
              } else {
                this.$message.error("修改失败");
              }
            });
        }
      });
    },
  },
  mounted() {
    this.loadStudentMsg();
  },
  computed: {
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
.st_info {
  color: #000;
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

.trans {
  position: relative;
  width: 500px;
  background-color: #fff;
  margin: 0 auto;
  padding: 50px;
  bottom: 0;
}

/* .form {
  width: 50%;
  margin: 0 auto;
} */

.main {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.main h1 {
  font-size: 50px;
  text-align: center;
  vertical-align: middle;
  height: 110px;
  line-height: 100px;
  width: 100%;
}
.warning {
  color: red;
  margin: 10px;
  text-align: center;
}
</style>
<style>
.st_info .info_button {
  margin-left: 200px;
}
</style>